<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>并列式布局</title>

  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <p>
    <a href="http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html">只要一行代码，实现五种 CSS 经典布局</a>
  </p>
  <p>并列式布局就是多个项目并列。如果宽度不够，放不下的项目就自动折行。 它的实现也很简单。首先，容器设置成 Flex 布局，内容居中（justify-content）可换行（flex-wrap）。</p>
  <p>然后，项目上面只用一行flex属性就够了</p>
  <p>flex属性是flex-grow、flex-shrink、flex-basis这三个属性的简写形式。</p>
  <p>
      flex-basis：项目的初始宽度。
      flex-grow：指定如果有多余宽度，项目是否可以扩大。
      flex-shrink：指定如果宽度不足，项目是否可以缩小。
  </p>
  <p>
      flex: 0 1 150px;的意思就是，项目的初始宽度是150px，且不可以扩大，但是当容器宽度不足150px时，项目可以缩小。
  </p>
  <p>如果写成flex: 1 1 150px;，就表示项目始终会占满所有宽度。</p>
  

  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
</body>

</html>